<!DOCTYPE html>
<html>
     <head>
          <title>个人主页</title>
          <meta charset="utf-8">
              <style>
                  
                  body{
                         margin: 0;
                         margin-bottom: 80px;
                         background-color: #33ffcc;
                  }
                    #banner{

                        height: 620px;
                        /*设置背景图片*/
                        background-image: url(6.jpg);
                        background-position: 50% 50%;
                        background-size: 100% 100%;
                    }
                    #container{
                   width: 1000px;
                   margin: 0 auto;

                    }
                    h1{
                           color:#cc33cc;
                           text-align: center;
                           margin: 0;
                    }
                    h2{
                           color:#996600;
                    }
                    h4{
                           color:#ccff00;
                           text-align: center;
                    }
                     .pic{
                    /*img标签如果不设置宽高，那么宽高等于所显示的图片的高度，如果同时设置了宽高，那么就等于设置的宽高，如果只设置高度，那么高度会随之等比例缩放*/
                                         
                        width: 100%;
                    }
                    .text{
                            font-family:微软雅黑;
                           color: #ffcc00;
                           text-indent: 2em;

                    }
                     .small{
                             font-family:宋体;
                           color: #00f;
                           text-indent: 2em;

                    }
                    .box{
                           color: #000000;
                           text-indent: 2em;

                    }
                     .third{
                         color: #cc00cc;
                           text-indent: 2em;

                    }
                    #fixed{
                        font-size: 20px;
                        color: red;
                         width: 100%;
                         height: 50px;
                          text-align: center;
                        background-color:#ffffcc;
                        position: fixed;
                        left: 0px;
                        top: 0px;
                    }
                    #nav a{
                        text-decoration: none;
                         margin: 0 20px;
                    height: 80px;
                    text-align: right;
                    line-height: 40px;
                    background-color: white;
                    right: 200px;
                    }
                    .jpg{
                         height: 500px;
                         background-image: url(0.jpg);
                         background-size: 100% 100%;
                         position: relative;
                    }
                    .photo{
                            width: 150px;
                            height: 150px;
                            border-radius: 50%;
                            border:solid 4px;stop-color: red;
                            position:absolute;
                    }
                    #f1{
                      left: 0px;
                      top: 60;
                    }
                    #f2{
                        left: 850px;
                        border:30px;
                    }
                        #f3{
                            top: 300px;
                            right: 400px;
                        }
                    
              </style>
</head>
<body>
    <div id="banner"></div>
    <div id="container">
        <h1>刘勇杰</h1>
        <br>
        <h4>欢迎来到我的主页</h4>
        <hr>
        <div>
        <h1 id="school">我的学校</h1>
        <p class="text">鹤壁职业技术学院是经河南省人民政府批准、国家教育部备案的一所全日制地方高职院校。学院由鹤壁教育学院、鹤壁中等专业学校、鹤壁广播电视大学、鹤壁师范学校四校于2001年合并组建而成。
截至2016年1月，学校占地面积1306亩，建筑面积42.8万平方米。学校设有10院4部，44个专业。学校拥有专任教师718人，全日制在校生人数1.8万余人，各类社会技能培训年均1万余人次[1]  </p>
        <img class="pic" src="5.jpg">
        </div>
        <br>
        <div>
        <h1 id="classlate">我的爱好</h1>
        <p class="small">篮球场上汗流浃背的会让你的身体得到充分的伸展,使你血液流通,精神百倍.打篮球对人的身体好处很多例如：打篮球可以锻炼人的腿部肌肉，腹部肌肉，上肢肌肉，总之打篮球对人的肌肉锻炼很有帮助。打篮球真的可以使人长高的，由于打篮球对人的小腿肌肉锻炼很有帮助，所以可以提高人的弹跳力。打篮球同样可以锻炼人的协调能力，因为很多篮球基本动作对人的协调性有很大的要求。打篮球对锻炼人的反应能力也很有帮助，所以说打篮球对人的好处很多，但是我们还是要注意保护自己，很多动作做不到位也很容易受伤的。 打篮球可以排出废物,出汗是由气温或体内温度升高,引起汗线分泌。运动时身体产生的热量会急剧增加,运动员主要借助排汗来调节体内温度的平衡,还可以同时排出一些废物  </p>
        <img class="pic" src="3.jpg">
        </div>
        <div>
        <h1 id="idol">我的偶像</h1>
        <p class="box">第十五届中央候补委员，十六届、十七届、十八届中央委员，十七届中央政治局委员、常委、中央书记处书记，十八届中央政治局委员、常委、中央委员会总书记。第十一届全国人大第一次会议当选为中华人民共和国副主席。十七届五中全会增补为中共中央军事委员会副主席。第十一届全国人大常委会第十七次会议任命为中华人民共和国中央军事委员会副主席。十八届一中全会任中共中央军事委员会主席、中华人民共和国主席、中华人民共和国中央军事委员会主席。 </p>
        <img class="pic" src="4.jpg">
        </div>
        <div>
        <h1 id="hometown">我的家乡</h1>
        <p class="third">无论是土生土长的家乡人，还是生活在当地的外乡人，或者是旅居在海外的华人，谁不对自己的家乡有份难舍的情怀，每个人都爱自己的家乡，喜爱理由何止一百条。家乡是生命的摇篮，记载着自己的人生轨迹，想起自己的家乡，就会想起家乡的亲人，想起带给自己快乐的童年和充满激情的青春，除了她固有的可爱以外，家乡已经被注入了情感内涵，这种情愫已经融进了我们的生命。
古往今来，家乡一直是文人骚客们谈论的亘古不变的话题。树高千尺，落叶归根，故乡之思，永远都是游子的至诚抒怀。在他们看来，家乡是他们心灵的依靠、感情的寄托。家乡是缕阳光，冷寂时可以寻得温暖；家乡是个港湾，孤单时可以停泊靠岸。他们借诗言志，表达自己对家乡的思恋。由此便衍生出了无数千古动人的诗章，在汩汩流淌的华夏文化长河中，卷起层层浪波。 </p>
        <img class="pic" src="7.jpg">
        </div>
        <div>
           <h1 id="student">我的同学</h1>
            <p>同学，又称同窗，是指有共同学习环境的一群学生。可小分为同班同学、同级同学和同校同学等。
同学通常指曾经于同一时间在一起学习的人，而并非与自己同时在学的校友，一般比自己较高年级的同学称为学长、学姊，比自己较低年级的同学称为学弟、学妹，一般而言同学友谊比较纯朴，没有重大的利益权力的竞争，因此不少人与同学成为好友，甚至知己、密友</p>
           <div class="jpg"> 
             <img src="8.jpg"class="photo" id="f1" >
            <img src="9.jpg"class="photo" id="f2" > 
             <img src="10.jpg" class="photo" id="f3" >
           </div>
        <hr>
    </div>
    <div id="fixed">
        <div id="nav">
        <a href="#school">我的学校</a>
         <a href="#hometown">我的家乡</a>                           
         <a href="#classlate">我的爱好</a>                          
          <a href="#idol">我的偶像</a> 
          <a href="#student">我的同学</a>
           </div> 
    </div>
</body>
</html>